<script setup>
import { ref } from 'vue'
import { toRaw } from '@vue/reactivity'
import {postCustomerSendDetail} from '@/api'
const form = ref({})
const show = async (id)=>{
  console.log('sdasdasd')
  const r = await postCustomerSendDetail({id:id})
  if (r) {
    form.value = r.data
  }
}
defineExpose({
  show
})
</script>
<template>
	<div>
			<div class="app-edit app-gap-block-top">
			<div class="app-edit-title">
				<span class="app-edit-title-words">基础信息</span>
			</div>
			<div class="app-edit-body">
        <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak">群发内容：</div>
          <div class="table-content app-success-font" v-if="form.adjunct_data">共{{form.adjunct_data.length + 1}}个条</div>
        </div>
        <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak"></div>
          <div class="table-content">{{form.content}}</div>
        </div>
          <div v-if="form.adjunct_data">
									<div style="margin-left:200px;margin-top: 10px"
										class="app-flex-left"
										v-for="(item, index) in form.adjunct_data"
										:key="index"
									>
										<el-avatar
											shape="square"
											:src="item.url || item.link_picurl || item.miniprogram_imgurl"
											size="50"
										/>
										<span style="display: inline-block; margin-left: 10px">{{
											item.title || item.link_title || item.miniprogram_title
										}}</span>
									</div>
		
                </div>
                <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak">发送类型：</div>
          <div class="table-content">{{form.send_status==1?'立即群发':'定时群发'}}</div>
        </div>
        <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak">发送状态：</div>
          <div class="table-content">{{form.send_status==1?'立即群发':'定时群发'}}</div>
        </div>
         <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak">发送时间：</div>
          <div class="table-content">{{form.send_time}}</div>
        </div>
        <div class="app-flex-left table-line">
          <div class="table-tip-4 app-words-tip-weak">群发对象：</div>
          <div class="table-content" v-if="form.staffer&&form.groups">
            <div>
              在<span v-for="(item,index) in form.staffer">{{item + '' + (index+1==form.staffer.length?'':'、')}}</span>
          里满足以下条件中的{{form.groups.length}}个客户
            </div>
            <div><span v-for="(item,index) in form.groups">{{item + index+1==form.staffer.length?'':'、'}}</span></div>
         
          </div>
        </div>
      </div>
      </div>

      				<div v-if="form.detail" class="app-edit app-gap-block-top">
			<div class="app-edit-title">
				<span class="app-edit-title-words">数据统计</span>
			</div>
      <div class="app-edit-body">
					<el-tag class="app-blue-card" style="width:400px;margin-right:14px">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.send_staff}}人</div>
						<div class="app-card-desc">已发送成员</div>
					</div>
					<div class="app-card-item">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.delivery_customer}}人</div>
						<div class="app-card-desc">送达用户</div>
					</div>
				
					</div>
				</el-tag>
        <el-tag class="app-blue-card" style="width:400px;margin-right:14px">
					<div class="app-flex-left">
						<div class="app-card-item app-border-right">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.unsent_staff}}人</div>
						<div class="app-card-desc">未发送成员</div>
					</div>
					<div class="app-card-item">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.unsent_customer}}人</div>
						<div class="app-card-desc" style="display:flex;align-items:center">未送达客户	<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="bottom" trigger="hover">
												<div class="app-container">
                        未发送和发送失败的员工拥有的所有客户数
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
            </div>
					</div>
				
					</div>
				</el-tag>
         <el-tag class="app-blue-card" style="width:400px;">
					<div class="app-flex-left">
					
					<div class="app-card-item  app-border-right">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.limit_customer}}人</div>
						<div class="app-card-desc" style="display:flex;align-items:center">客户接收已达上限<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="bottom" trigger="hover">
												<div class="app-container">
                        每位客户每天可以接收1条群发消息，不限企业发布的群发和个人发布的群发。如果超出则发送不成功，记为客户接收已达上限
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
            </div>
					</div>
          	<div class="app-card-item">
						<div class="app-card-title" style="color:#000;font-weight:600">{{form.detail.not_customer}}人</div>
						<div class="app-card-desc">因不是好友发送失败</div>
					</div>
				
					</div>
				</el-tag>
        </div>

       
				

			</div>
		
	</div>
</template>
<style lang="scss">
@import url('../../../../style/app-component.scss');
.el-page-header {
  display:none;
}
</style>
